﻿//载入基础页面
{extend name="common/base" /}

//页面单独CSS
{block name="CustomCSS"}
<link rel="stylesheet" href="__STATIC__/vendors/css/datatables/datatables.min.css">
<link rel="stylesheet" href="__STATIC__/vendors/js/bootstrap-input/css/fileinput.min.css">

{/block}

//页面单独JS
{block name="CustomJS"}
<script src="__STATIC__/vendors/js/bootstrap-input/js/fileinput.min.js"></script>
<script src="__STATIC__/vendors/js/bootstrap-input/js/locales/zh.js"></script>
<script src="__STATIC__/vendors/js/datatables/datatables.min.js"></script>
<script src="__STATIC__/vendors/js/noty/noty.min.js"></script>
<script>

    (function ($) {
    'use strict';
    // ------------------------------------------------------- //
    // Auto Hide
    // ------------------------------------------------------ //    
        $(function () {
            //定义表格
            var table = $('#table').DataTable({
                language: {
                    "url": "__STATIC__/vendors/js/datatables/cn.json"
                },
                lengthMenu: [
                    [10, 15, 20, -1],
                    [10, 15, 20, "所有"]
                ],//分页数目
                stateSave: true, 
                columnDefs: [
                    { "orderable": false, "targets": [9,10]}//禁止排序
                ]
            });
        });

        //切换侧边栏为窄边
        toggle();

    })(jQuery);

    function toggle(){
        if ($(window).outerWidth() > 1200) {
            $('#toggle-btn').toggleClass('active');

            $('.side-navbar').toggleClass('shrinked');
            $('.content-inner').toggleClass('active');

            if ($(window).outerWidth() > 1183) {
                if ($('#toggle-btn').hasClass('active')) {
                    $('.navbar-header .brand-small').hide();
                    $('.navbar-header .brand-big').show();
                } else {
                    $('.navbar-header .brand-small').show();
                    $('.navbar-header .brand-big').hide();
                }
            }

            if ($(window).outerWidth() < 1183) {
                $('.navbar-header .brand-small').show();
            }
        }
    }

        //提交删除链接
    function urlSubmit(url,name){
        var n = new Noty({
            type: "error",
            text: '确认需要删除客户名称为：</br>'+name+' 的订单吗？</br>请慎重操作！ ',
            progressBar : true, 
            animation: {
                open: "animated bounceInRight",
                close: "animated bounceOutRight"
            },
            buttons: [
                Noty.button('确定', 'btn btn-danger', function () {
                    $.post(url, function(data, status){
                        if (status == "success") {
                            if (data == "ok") {
                                //提交成功后调用
                                new Noty({
                                    type: "success",
                                    layout: "topRight",
                                    text: "车架号为 " + name + "的车辆删除成功",
                                    progressBar: true,
                                    timeout: 2500,
                                    animation: {
                                        open: "animated bounceInRight",
                                        close: "animated bounceOutRight"
                                    },
                                    callbacks: {
                                        afterShow: function() {
                                            window.location.reload();
                                        },
                                    }
                                }).show();
                            }else{
                                //提交失败后调用
                                new Noty({
                                    type: "error",
                                    layout: "topRight",
                                    text: "数据删除失败",
                                    progressBar: true,
                                    timeout: 2500,
                                    animation: {
                                        open: "animated bounceInRight",
                                        close: "animated bounceOutRight"
                                    }
                                }).show();
                            }
                        }
                    });//确认后执行urlSubmit()完成实际执行
                    n.close();
                }, {id: 'button1', 'data-status': 'ok'}),

                Noty.button('取消', 'btn btn-shadow', function () {
                    n.close();
                })
            ]
        }).show();
    };

    //打开detail模态框
    $('#detail-modal').on('hidden.bs.modal', function (e) {
            $(this).find('.modal-body').html(' 等待结果，请稍后...');
            $(this).removeData('bs.modal');
        }).on('show.bs.modal', function (e) {
            var button = $(e.relatedTarget);
            var modal = $(this);
            modal.find('.modal-content').load(button.data("remote"));
        });

</script>
{/block}

//页面名称
{block name="PageName"}
过往订单列表
{/block}

//自定义Modal
{block name="Modal"}
<!-- 详情Modal开始 -->
<div id="detail-modal" class="modal fade">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            读取中。。。
        </div>
    </div>
</div>
<!-- 详情Modal结束 -->
{/block}

//主页面
{block name="main"}
<div class="row">
    <div class="col-xl-12">
        <!-- Export -->
        <div class="widget has-shadow">
        	<div class="widget-header bordered no-actions d-flex align-items-center">
                <h2>过往订单列表</h2>
            </div>
            <div class="widget-body">
                <div class="table-responsive">
                    <table id="table" class="table mb-0">
                        <thead>
                            <tr>
                                <th>订单时间</th>
                                <th>顾问</th>
                                <th>名称</th>
                                <th>电话</th>
                                <th>车系</th>
                                <th>配置</th>
                                <th>颜色</th>
                                <th>车架号</th>
                                <th>状态</th>
                                <th>交车时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {volist name="data" id="list"}
                            <tr {if $list.state == 2}style="color:green;"{else if $list.state == 0}style="color:red;"{/if}>
                                <td>{$list.create_date|date="m月d日"}</td>
                                <td>{$list.sales}</td>
                                <td>{$list.name}</td>
                                <td>{$list.phone}</td>
                                <td>{$list.vehicle}</td>
                                <td>{$list.config}</td>
                                <td>{$list.color}</td>
                                <td>{$list.vin}</td>
                                <td>{if $list.state == 0}退单{else if $list.state == 2}交付{/if}</td>
                                <td>{$list.deliver_date|date="m月d日"}</td>
                                <td class="td-actions">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-info btn-sm mr-1 mb-2" data-toggle="modal" data-remote="{:url('Order/read',['id' => $list.id])}" data-target="#detail-modal">详情</button>
                                        <button type="button" class="btn btn-danger btn-sm mr-1 mb-2" onClick="urlSubmit('{:url('Order/delete',['id' => $list.id])}','{$list.name}')">删除</button>
                                    </div>
                                   <!--  <a data-toggle="modal" data-remote="{:url('Order/read',['id' => $list.id])}" data-target="#detail-modal"><i class="la la-commenting edit"></i></a>
                                    <a href="{:url('Order/edit',['id' => $list.id])}"><i class="la la-edit edit"></i></a>
                                    <a onClick="urlSubmit('{:url('Order/delete',['id' => $list.id])}','{$list.name}')"><i class="la la-close delete"></i></a> -->
                                </td>
                            </tr>
                            {/volist}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- End Export -->
    </div>
</div>

<!-- End Centered Modal -->
{/block}

